<template>
	<view class="orderActionBtns-wrapper">
		<!-- 省略号部分开始 -->
		<view v-if="checkShowMore()" class="more" @click.stop="showPopup = !showPopup">
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="bottomLine" />
			<!-- 弹出来的按钮部分 -->
			<view v-if="showPopup"
				:class="{ popoverBtnWrapper: true, singlePopupBtnWrapper: checkIsSingleCls(), doublePopupBtnWrapper: checkIsDoubleCls() }">
				<Tousu :isUsedInList="isUsedInList" :isUsedInMore="true" :order="orderVO" :product="productVo"></Tousu>
				<!-- 投诉按钮 -->
				<ChaKanWuliu :isUsedInList="isUsedInList" :isUsedInMore="true" :order="orderVO" :product="productVo">
				</ChaKanWuliu>
				<!-- 查看物流按钮 -->
			</view>
			<!-- 弹出来的按钮结束 -->
		</view>
		<!-- 省略号结束 -->

		<!-- 按钮开始，摆放顺序随意，显示顺序取决于在utils文件的js定义 -->
		<!-- <Tousu :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Tousu> -->
		<!-- 投诉按钮 -->







		<Suiping :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Suiping>
		<!-- 碎屏险 -->


		<!-- 公证签约 -->
		<Gongzheng :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Gongzheng>

		<!-- 付公证费 -->
		<Paygongzheng :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Paygongzheng>

		<Zhangdan :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Zhangdan>
		<!-- 账单按钮 -->


		<ChaKanWuliu :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></ChaKanWuliu>
		<!-- 查看物流按钮 -->


		<!-- <Maiduan :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Maiduan> -->
		<!-- 买断按钮 -->


		<Quxiaodindan :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Quxiaodindan>
		<!-- 取消订单按钮 -->
		<Xiugaidizhi :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Xiugaidizhi>
		<!-- 修改地址按钮 -->
		<Querenshouhuo :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Querenshouhuo>
		<!-- 确认收货按钮 -->

		<Quzhifu :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"
			:userOrderCashDto="userOrderCashDto"></Quzhifu>
		<!-- 去支付按钮 -->


		<Hetongfei :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"
			:userOrderCashDto="userOrderCashDto"></Hetongfei>

		<Shoufu :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Shoufu>
		<!-- 首付按钮 -->


		<FaceRec :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></FaceRec>
		<!-- 人脸识别 -->







		<!-- <Shualianrenzheng :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Shualianrenzheng> -->
		<!-- 刷脸认证按钮 -->
		<!-- <Zaicixiadan :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Zaicixiadan> -->
		<!-- 再次下单按钮 -->
		<!-- <Shenqingxiugai :isUsedInList="isUsedInList" :order="orderVO" :product="productVo"></Shenqingxiugai> -->
		<!-- 申请修改按钮 -->
		<!-- 按钮结束 -->
	</view>
</template>

<script>
	// 订单模块的操作按钮集合，即使用在订单列表页面，也使用在订单详情页面
	import GuiHuanBtn from "@/components/orderItem/orderActionBtns/btns/guihuan.vue"
	import Maiduan from "@/components/orderItem/orderActionBtns/btns/maiduan.vue"
	import FaceRec from "@/components/orderItem/orderActionBtns/btns/faceRec.vue"
	import Shualianrenzheng from "@/components/orderItem/orderActionBtns/btns/shualianrenzheng.vue"
	import ChaKanWuliu from '@/components/orderItem/orderActionBtns/btns/chakanwuliu.vue';
	import Querenshouhuo from '@/components/orderItem/orderActionBtns/btns/querenshouhuo.vue';
	import Quxiaodindan from '@/components/orderItem/orderActionBtns/btns/quxiaodindan.vue';
	import Quzhifu from '@/components/orderItem/orderActionBtns/btns/quzhifu.vue';
	import Gongzheng from '@/components/orderItem/orderActionBtns/btns/gongzheng.vue';
	import Paygongzheng from '@/components/orderItem/orderActionBtns/btns/payGongzheng.vue';
	import Hetongfei from '@/components/orderItem/orderActionBtns/btns/hetongfei.vue';
	import Tousu from '@/components/orderItem/orderActionBtns/btns/tousu.vue';
	import Xiugaidizhi from '@/components/orderItem/orderActionBtns/btns/xiugaidizhi.vue';
	import Zhangdan from '@/components/orderItem/orderActionBtns/btns/zhangdan.vue';
	import Shoufu from '@/components/orderItem/orderActionBtns/btns/shoufu.vue';
	import Suiping from '@/components/orderItem/orderActionBtns/btns/brokenScreen.vue';
	import Zaicixiadan from '@/components/orderItem/orderActionBtns/btns/zaicixiadan.vue';
	import Shenqingxiugai from '@/components/orderItem/orderActionBtns/btns/shenqingxiugai.vue';
	import {
		checkOrderRenting,
		checkOrderOverdue,
		checkPosition
	} from '@/components/orderItem/orderActionBtns/utils/checkShowBtn'; // 判断订单租用中、订单已逾期

	export default {
		name: 'orderActionBtns',

		data() {
			return {
				showPopup: false // 是否显示弹出的菜单
			};
		},
		options: {
			styleIsolation: 'shared'
		},
		props: {
			orderVO: {
				type: Object,
				default: {}
			}, // 订单对象
			isUsedInList: {
				type: Boolean,
				default: true
			}, // 是否使用在订单列表页面，除了订单列表页面外还能使用在订单详情页面
			productVo: {
				type: Object,
				default: null
			}, // 商品的建模对象，可不传。不传的场景：orderVO对象里面已经包含了商品描述数据，比如说使用在订单列表时，就不需要传；如果orderVO里面有商品定义数据的话，那么就需要传入该数据
			userOrderCashDto: {
				type: Object,
				default: null
			} // 在商品详情页面使用的话需要传入
		},

		mounted() {
			const hideCb = () => {
				this.showPopup = false;
			};
			this.eventId = this.$eventEmitter.subscribe('hidePopup', hideCb); // 订阅隐藏省略号弹窗的事件
		},

		beforeDestroy() {
			this.eventId && this.$eventEmitter.removeHandler('hidePopup', this.eventId);
		},

		components: {
			GuiHuanBtn,
			Maiduan,
			FaceRec,
			ChaKanWuliu,
			Querenshouhuo,
			Quxiaodindan,
			Quzhifu,
			Tousu,
			Xiugaidizhi,
			Zhangdan,
			Shoufu,
			Zaicixiadan,
			Shenqingxiugai,
			Shualianrenzheng,
			Suiping,
			Hetongfei,
			Gongzheng,
			Paygongzheng
		},

		computed: {
			/**
			 * 订单租用中
			 */
			orderRenting: function() {
				return checkOrderRenting(this.orderVO, this.isUsedInList);
			},
			/**
			 * 订单已逾期
			 */
			orderOverdue: function() {
				return checkOrderOverdue(this.orderVO, this.isUsedInList);
			}
		},

		methods: {
			/**
			 * 省略号中只有单个按钮时
			 */
			checkIsSingleCls: function() {
				if (!this.isUsedInList && this.orderOverdue) {
					if (checkPosition.guihuan(this.orderVO, this.isUsedInList) != undefined && checkPosition.maiduan(
							this.orderVO, this.isUsedInList) != undefined) return true; // 归还和买断都显示了，才会大于5个
					return false;
				}
				if (this.isUsedInList && this.orderRenting) {
					// 订单列表页面，且租用中状态
					let base = 2;
					if (checkPosition.xuzu(this.orderVO) != undefined) base++; // 续租展示了
					if (checkPosition.maiduan(this.orderVO) != undefined) base++; // 买断展示了
					if (checkPosition.guihuan(this.orderVO) != undefined) base++; // 归还展示了
					return base > 4;
				}
			},

			/**
			 * 省略号中有多个按钮时
			 */
			checkIsDoubleCls: function() {
				if (!this.isUsedInList) {
					// 使用在详情页面才有可能显示省略号
					if (this.orderRenting) {
						// 且得是租用中才有可能
						const arr = [checkPosition.xuzu(this.orderVO), checkPosition.maiduan(this.orderVO),
							checkPosition.guihuan(this.orderVO)
						];
						return arr.every((n) => n != undefined);
					} else {
						return false;
					}
				}
				return false;
			},
			/**
			 * 判断是否显示省略号
			 */
			checkShowMore: function() {
				return this.checkIsSingleCls() || this.checkIsDoubleCls();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.orderActionBtns-wrapper {
		// display: flex;
		align-items: center;
		// justify-content: flex-end;
		position: relative;
		height: 56rpx;

		/deep/ .actionBtn {
			width: 138rpx;
			height: 56rpx;
			border-radius: 30rpx;
			border: 1px solid #c0c0c0; // 1rpx 在高分辨率设备上可能会遇到显示不出来的问题，所以这里改成1px
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-left: 24rpx;
			flex-shrink: 0;
			float: right;
			// position: absolute;
		}

		.actionBtn {
			position: relative;
		}

		/deep/ .actionBtn0 {
			// @include global-background-color();
			color: #666666;
		}

		// /deep/ .actionBtn0 {
		//   @include global-background-color();
		//   color: #333333;
		//   border: none;
		//   right: 0;
		// }
		// /deep/ .actionBtn1 {
		//   right: 162rpx;
		// }
		// /deep/ .actionBtn2 {
		//   right: 324rpx;
		// }
		// /deep/ .actionBtn3 {
		//   right: 486rpx;
		// }

		.more {
			position: absolute;
			left: 0;
			height: 56rpx;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			width: 38rpx;
			justify-content: space-between;
			z-index: 90;

			.dot {
				width: 6rpx;
				height: 6rpx;
				border-radius: 50%;
				background: #333333;
			}

			.bottomLine {
				width: 52rpx;
				height: 8rpx;
				@include global-background-color();
				border-radius: 4rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;
				z-index: -1;
			}

			.popoverBtnWrapper {
				position: absolute;
				width: 140rpx;
				box-shadow: 24rpx;
				background: #fff;
				z-index: 92;
				left: -8rpx;
				border-radius: 4rpx;
				box-shadow: 0 3rpx 6rpx -4rpx rgba(0, 0, 0, 0.12), 0 6rpx 16rpx 0 rgba(0, 0, 0, 0.08), 0 9rpx 28rpx 8rpx rgba(0, 0, 0, 0.05);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&::after {
					content: '';
					width: 10rpx;
					height: 10rpx;
					transform: rotate(45deg);
					position: absolute;
					left: 21rpx;
					bottom: -5rpx;
					background: #fff;
					z-index: 90;
				}

				/deep/ .actionBtn {
					border: none;
					width: 100%;
					border-radius: 0;
					text-align: center;
					margin-left: 0;
					position: static !important;
				}
			}

			.singlePopupBtnWrapper {
				height: 50rpx;
				top: -36rpx;
			}

			.doublePopupBtnWrapper {
				height: 112rpx;
				top: -112rpx;
			}
		}
	}
</style>